<template>
  <div class="date-range-page-wrap">
    <el-calendar>
      <template slot="dateCell" slot-scope="{date, data}">
        <div
          class="date-cell"
          :class="{
            canuse: dateIsCanUse(data)
          }"
          @click="dateItemClick(date, data)"
        >{{data.day.split('-').slice(1).pop(2)}}</div>
      </template>
    </el-calendar>
    <el-row type="flex" justify="center">
      <el-button size="small" @click="$emit('cancel')">取消</el-button>
    </el-row>
    <BaseDialog title="预约时间" :visible.sync="isShowTimeRangeSelect" destroyOnClose>
      <timeRangeSelect
        @confirm="confirm"
        @cancel="isShowTimeRangeSelect=false"
        :bookingComeDate="this.selectDate"
      />
    </BaseDialog>
  </div>
</template>
<script>
import moment from 'moment';
import timeRangeSelect from './timeRangeSelect';

window.moment = moment;

export default {
  components: {
    timeRangeSelect
  },
  mounted() {},
  data() {
    return {
      selectDate: '',
      isShowTimeRangeSelect: false
    };
  },
  methods: {
    dateItemClick(date, data) {
      console.log(date, data);
      const isCanUse = this.dateIsCanUse(data);
      if (isCanUse) {
        this.selectDate = data.day;
        this.isShowTimeRangeSelect = true;
      }
    },
    confirm(time) {
      const dateTime = `${this.selectDate} ${time}`;
      console.log('选择时间', dateTime);
      this.$emit('confirm', dateTime);
      this.$emit('cancel');
    },
    // 未来n天可用
    dateIsCanUse(data) {
      const nowMoment = moment(moment().format('YYYY-MM-DD'));
      const dateMoment = moment(data.day);
      const diff = dateMoment.diff(nowMoment, 'days');
      if (diff >= 0) {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>
<style lang="less">
.date-range-page-wrap .el-calendar-day {
  padding: 0;
  height: 55px;
  .date-cell {
    background-color: #f2f6fc;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    &.canuse {
      background-color: #ffffff;
    }
  }
}
</style>
